<template>
  <el-dialog
    title="任务详情"
    v-model="dialogVisible"
    width="1200"
    :close-on-click-modal="false"
    append-to-body
    @close="close"
    @open="openInit"
  >
    <el-descriptions border :column="6">
      <el-descriptions-item label="关联群聊" :span="2">
        {{ detail.bindGroupName }}
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script setup name="TaskDetail">
import { getInfoById } from "../service";

const detail = ref({});
const originRow = ref({});
const useApi = ref(false);
const dialogVisible = ref(false);
// 关闭
function close() {
  dialogVisible.value = false;
}

const detailLoading = ref(false);
async function infoById(detailId) {
  detailLoading.value = true;
  const result = await getInfoById(detailId)
    .then((res) => res.data)
    .finally(() => {
      detailLoading.value = false;
    });
  detail.value = result;
}

function openInit() {
  if (useApi && originRow.value.id) {
    infoById(originRow.value.id);
  } else {
    detail.value = originRow.value;
  }
}
// 打开
function open(row, api = false) {
  useApi.value = api;
  originRow.value = row;
  dialogVisible.value = true;
}

defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  width: 100px;
  color: #909399 !important;
}

:deep(.el-descriptions__content) {
  width: 300px !important;
  box-sizing: border-box;
}
</style>
